@import '../../style/template';
@import "../../style/vars";

.howitworks {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $background-color;
    padding-bottom: 5%;

    &__title{
        padding: 3% 0 3% 0;
        font-size: 29px;
        @extend %font-title;

        @media #{$tablet}{
            font-size: 27px;
        }
        @media #{$mobile} {
            font-size: 23px;
        }
    }


    &__lists{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 2%;

        @media #{$tablet}{
            grid-template-columns: 1fr 1fr;
        }
        @media #{$mobile} {
            grid-template-columns: 1fr;
            margin-bottom: 4%;
        }
    }
}